<template>
	<el-button
		:type="type"
		:size="size"
		:plain="plain"
		:loading="loading"
		:disabled="disabled"
		:icon="icon"
		:autofocus="autoFocus"
		:native-type="nativeType"
		v-if="hasPermission(permission)"
		@click="clickHandler">
		{{label}}
	</el-button>
</template>

<script>
import hasPermission from '@/utils/premission';
export default {
    name: 'permission-button',
    date(){
    	return {
    	}
    },
    props: {
        permission: {
            type: String,
            required:true
        },
        label:{
        	type: String,
            required:true
        },
        type:{
        	type: String,
            default:''
        },
        size:{
        	type: String,
            default:''
        },
        plain:{
        	type: Boolean,
            default:false
        },
        loading:{
        	type: Boolean,
            default:false
        },
        disabled:{
        	type: Boolean,
            default:false
        },
        icon:{
        	type: String,
            default:''
        },
        autoFocus:{
        	type: Boolean,
            default:false
        },
        nativeType:{
        	type: String,
            default:'button'
        }
    },
    methods: {
    	hasPermission:hasPermission,
    	clickHandler(){
    		this.$emit('click');
    	}
    }
}
</script>
